<!-- 页面 -->
<template>
	<s-layout title="我的订单">
		<su-sticky bgColor="#fff">
			<su-tabs :list="tabMaps" @change="onTabsChange" :activeStyle="{color:'#3A3A3A'}" :inactiveStyle="{color:'#818181'}" lineColor="#35C7A8" :current="state.currentTab"></su-tabs>
		</su-sticky>
		<view class="ss-flex flex-wrap ss-p-x-24 ss-p-t-24">
			<orderItem>
				<template>
					<view class="ss-flex justify-end ss-m-t-30">
						<view class="order-btn ss-m-l-10">删除</view>
						<view class="order-btn ss-m-l-10">付款</view>
					</view>
				</template>
			</orderItem>
			<orderItem>
			</orderItem>
			<orderItem>
				<template>
					<view class="ss-flex justify-end ss-m-t-30">
						<view class="order-btn assess ss-m-l-10">立即评价</view>
					</view>
				</template>
			</orderItem>
			<orderItem>
				<template>
					<view class="ss-flex justify-end ss-m-t-30">
						<view class="order-btn ss-m-l-10">退款进度</view>
					</view>
				</template>
			</orderItem>
			<orderItem>
				<template>
					<view class="ss-flex justify-end ss-m-t-30">
						<view class="order-btn ss-m-l-10">退款进度</view>
					</view>
				</template>
			</orderItem>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import _ from 'lodash';
	import orderItem from './components/order-item.vue'
	// 数据
	const state = reactive({
		currentTab: 0
	});

	const tabMaps = [{
			name: '全部订单',
			value: 'all',
		},
		{
			name: '待付款',
			value: 'unpaid',
		},
		{
			name: '待使用',
			value: 'nosend',
		},
		{
			name: '待评价',
			value: 'noget',
		},
		{
			name: '已完成',
			value: 'nocomment',
		},
		{
			name: '退款/售后',
			value: '123'
		}
	];

	const onTabsChange = (e) => {
		if (state.currentTab === e.index) return;
		state.currentTab = e.index;
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	
	.order-btn {
		width: 140rpx;
		height: 52rpx;
		border-radius: 26rpx;
		border: 2rpx solid #E4E4E4;
		font-weight: 400;
		font-size: 24rpx;
		color: #5C5C5C;
		line-height: 48rpx;
		text-align: center;
	}
	
	.assess {
		color: #35C7A8 !important;
		border-color: #35C7A8 !important;
	}
</style>